import React from 'react';
import Taro from '@tarojs/taro';

import * as T from '../types';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
type IInfoProps = T.IProps & T.IInfoProps;

import {View, Image, Input} from '@tarojs/components';
import './Search.less';
import search from '@/assets/image/community/search.png';

// @ts-ignore
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
export default class Search extends React.Component<Partial<IInfoProps>, T.IInfoState> {
  render() {
    let {
      main: {content},
      actions: {action},
    } = this.props;
    return (
      <View className="componentSearch">
        <View className="searchBox">
          <Image className="searchIcon" src={search} />
          <Input
            className="searchText"
            maxlength={16}
            type="text"
            placeholderStyle="color:#BFBFBF"
            placeholder="请输入商家名、团餐名"
            onInput={(e) => {
              action.commonChange('main.keyWords', e.detail.value);
              action.commonChange('main.page', 1);
              action.commonChange('main.totalPage', 0);
              action.page();
            }}
            onConfirm={(e) => {
              action.page();
            }}
          />
        </View>
      </View>
    );
  }
}
